<template>
	<view class="retrieve_pwd_container">
		<!-- banner -->
		<view class="banner_img_box">
			<image :src="loginBanner" mode="widthFix" class="banner_img"></image>
		</view>

		<view class="form_box">
			<view class="form_all">
				<view class="form_title">
					找回密码
				</view>

				<u-form :model="loginForm" ref="formLogin">
					<view class="form_input_box">
						<view class="input_top_box">
							<view class="top_icon_box">
								<image src="/static/login/icon-phone.png" mode="" class="top_icon"></image>
							</view>
							<view class="top_title">
								手机号
							</view>
						</view>
						<view class="">
							<u-form-item label="" prop="phoneNum" class="phont_input_line"><u-input
									v-model="loginForm.phoneNum" placeholder="请输入手机号" maxlength="11"
									:clearable="false" /></u-form-item>
						</view>
					</view>

					<view class="form_input_box">
						<view class="input_top_box">
							<view class="top_icon_box">
								<image src="/static/login/icon-code.png" mode="" class="top_icon"></image>
							</view>
							<view class="top_title">
								验证码
							</view>
						</view>
						<view class="code_input">
							<u-form-item label="" prop="phoneCode"><u-input v-model="loginForm.phoneCode"
									placeholder="请输入验证码" :clearable="false" /></u-form-item>
							<view class="" style="display: flex; justify-content: flex-end;">
								<button class="code_btn" size="mini" type="primary" :disabled="btnDis"
									@tap="sendCode">{{!codeTime?'获取验证码':codeTime+'s' + '后重新发送'}}</button>
							</view>
						</view>
					</view>

					<view class="form_input_box">
						<view class="input_top_box">
							<view class="top_icon_box">
								<image src="/static/login/icon-phone.png" mode="" class="top_icon"></image>
							</view>
							<view class="top_title">
								新密码
							</view>
						</view>
						<view class="">
							<u-form-item label="" prop="password" class="phont_input_line"><u-input
									v-model="loginForm.password" placeholder="请输入新密码" maxlength="11"
									:clearable="false" /></u-form-item>
						</view>
					</view>

					<view class="form_input_box">
						<view class="input_top_box">
							<view class="top_icon_box">
								<image src="/static/login/icon-phone.png" mode="" class="top_icon"></image>
							</view>
							<view class="top_title">
								确认密码
							</view>
						</view>
						<view class="">
							<u-form-item label="" prop="surePwd" class="phont_input_line"><u-input
									v-model="loginForm.surePwd" placeholder="请输入确认密码" maxlength="11"
									:clearable="false" /></u-form-item>
						</view>
					</view>

					<view class="login_tip_box">
						<view class="login_tip" @click="handleLogin">
							去登录
						</view>
					</view>
				</u-form>
			</view>
			<view class="login_btn" @click="handlerLogin">
				提 交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					phoneNum: '',
					phoneCode: '',
					password: '',
					surePwd: '',
				},
				seconds: 60,
				btnDis: false, // 发送验证码按钮不禁用
				btnText: "发送验证码", // 提示
				codeTime: 0,
				rules: {
					phoneNum: [{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phoneCode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}],

					password: [{
						required: true,
						min: 6,
						message: '请输入不少于6位数的新密码',
						trigger: ['change', 'blur'],
					}],
					surePassword: [{
						required: true,
						min: 6,
						message: '请输入不少于6位数的确认密码',
						trigger: ['change', 'blur'],
					}],
				},
				loginBanner: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/xcx_static/65fe2e5a81a02_1711156826.png'
			}
		},
		methods: {
			// 发送验证码
			sendCode() {
				if (this.loginForm.phoneNum == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else {
					// 开启倒计时
					this.countDown();
				}
			},

			// 验证码倒计时
			countDown() {
				if (this.codeTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: "none"
					});
					return;
				} else {
					this.getSms()
				}
				// 初始化定时器
				// let t = null;
				// // 倒计时1分钟
				// let timer = 60;
				// // 按钮禁用
				// this.btnDis = true;
				// // 计时器清零
				// clearInterval(t);
				// // 按钮显示时间
				// this.btnText = `${timer}s`;
				// t = setInterval(() => {
				// 	// 当倒计时完时，显示重新发送,按钮开启
				// 	if (timer == 0) {
				// 		clearInterval(t);
				// 		this.btnText = "重新发送";
				// 		this.btnDis = false;
				// 		return;
				// 	}
				// 	// 实现倒计时效果
				// 	timer--;
				// 	this.btnText = `${timer}s`;
				// }, 1000)
			},

			// 发送验证码接口
			getSms() {
				const that = this
				this.$request('/fxuserGetSmsCode', {
					phone: this.loginForm.phoneNum
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
						that.codeTime = 60
						let timer = setInterval(() => {
							that.codeTime--;
							if (that.codeTime < 1) {
								clearInterval(timer);
								that.codeTime = 0
							}
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						that.codeTime = 0
						return
					}
				})
			},

			// 修改密码接口
			updateFxuserPw() {
				this.$request('/updateFxuserPw', {
					phone: this.loginForm.phoneNum,
					code: this.loginForm.phoneCode,
					password: this.loginForm.surePwd
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							success: res => {
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/login/login'
									})
								}, 1200)
							}
						})
					} else {
						uni.showToast({
							title: '修改失败',
							icon: 'none'
						})
						return
					}
				})
			},

			// 登录
			handlerLogin() {
				this.$refs.formLogin.validate(valid => {
					const that = this
					if (valid) {
						if (that.loginForm.password !== this.loginForm.surePwd) {
							uni.showToast({
								title: '输入的两次密码不正确',
								icon: 'none'
							})
							return
						}
						that.updateFxuserPw()
					} else {
						console.log('验证失败');
					}
				});
			},

			// 去登录
			handleLogin() {
				this.loginForm = {}
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.formLogin.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	.retrieve_pwd_container {

		.banner_img_box {
			position: relative;
			width: 100%;

			.banner_img {
				width: 100%;
				height: 100%;
			}
		}

		.form_box {
			position: absolute;
			top: 400rpx;
			width: 100%;
			// height: 943rpx;
			background: #FFFFFF;
			opacity: 0.9;
			border-radius: 30rpx 30rpx 0px 0px;
			padding: 54rpx 79rpx 53rpx;

			.form_title {
				font-size: 36rpx;
				font-family: FZLanTingHeiS-R-GB;
				font-weight: 400;
				color: #1A1A1A;
				text-align: center;
			}

			.form_input_box {
				padding-top: 61rpx;

				.input_top_box {
					display: flex;
					align-items: center;

					.top_icon_box {
						width: 32rpx;
						height: 32rpx;

						.top_icon {
							width: 100%;
							height: 100%;
						}
					}

					.top_title {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #333333;
						padding-left: 23rpx;
					}
				}

				.code_input {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.code_btn {
						height: 60rpx;
					}
				}
			}

			.login_tip_box {
				display: flex;
				justify-content: flex-end;
				padding: 20rpx 0 30rpx;

				.login_tip {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #3488FE;
				}
			}


			.register_tip_box {
				display: flex;
				justify-content: flex-end;
				padding-top: 18rpx;

				.forget_title {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ccc;
				}

				.register_tip {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #3488FE;
				}
			}


			.input_read {

				::v-deep .u-radio__label {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #808080;
				}

			}

			.btn_box {
				padding-top: 36rpx;

				.login_btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 75rpx;
					background: linear-gradient(1deg, #55CDFF, #5692FF);
					border-radius: 38rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					margin-bottom: 31rpx;
				}

				.change_btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 75rpx;
					background: #E2F2FF;
					border-radius: 38rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #3488FE;
				}
			}
		}

		.login_btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 75rpx;
			background: linear-gradient(1deg, #55CDFF, #5692FF);
			border-radius: 38rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>